<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		a{text-decoration: none;}
		*{margin: 0;padding: 0;}
		#menu{width: 100px;border:1px solid bule; position: absolute;display: none;}
		#menu li{border-radius: 5px;list-style: none;text-align: center;line-height: 30px;background: #99FF99;border: 1px solid #f2f2f2;}
	</style>
	<body>
		<ul id="menu">
			<li><a href="http://www.baidu.com">百度</a></li>
			<li><a href="http://www.baidu.com">刷新</a></li>
			<li><a href="http://www.baidu.com">大象</a></li>
			<li><a href="http://www.baidu.com">装冰箱</a></li>
			<li><a href="http://www.baidu.com">开门</a></li>
			<li><a href="http://www.baidu.com">放进去</a></li>
			<li><a href="http://www.baidu.com">关门</a></li>
		</ul>	
		
	</body>
</html>
<script type="text/javascript">
//1、自定义右键菜单

function prevent(e){

	e.preventDefault?e.preventDefault():e.returnValue = false;
}


var oList = document.getElementById('menu');
document.oncontextmenu = function(e){
	var e = e||event;
	prevent(e);
	oList.style.display = "block";
	oList.style.left = e.pageX +'px';
	oList.style.top = e.pageY +'px';		
	
};
</script>